<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-04-08 18:18:36
 * @LastEditTime: 2020-06-23 11:56:42
 * @FilePath: \client\src\components\NavBar.vue
 * @Description: 导航条
 -->
<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-menu-item index="/">芊图社</el-menu-item>
    <el-menu-item index="/share">发布</el-menu-item>
    <el-menu-item v-if="token && userInfo" class="pull-right">
      <el-avatar :size="38" :src="userInfo.avatarUrl" fit="cover"></el-avatar>
    </el-menu-item>
    <el-menu-item v-if="token && userInfo" class="pull-right" index="/profile">个人中心</el-menu-item>
    <el-menu-item v-if="token && userInfo" class="pull-right" index="/#" @click="logout">退出登录</el-menu-item>
    <el-menu-item index="/login" class="pull-right" v-if="!token">登录</el-menu-item>
    <el-menu-item index="/register" class="pull-right" v-if="!token">注册</el-menu-item>
  </el-menu>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State, Mutation } from "vuex-class";
import UserInfo from "../model/UserInfo";
@Component({})
export default class NavBar extends Vue {
  activeIndex = "/";
  @State token: string;
  @State userInfo: UserInfo;
  @Mutation removeToken: Function;
  logout() {
    this.removeToken();
  }
}
</script>

<style lang="scss" scoped>
.pull-right {
  float: right;
}
</style>>